<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Plotr, Prototype, Bas Wenneker, BarChart, PieChart, LineChart, Charting, Plotr Configurator" />
<meta name="author" content="Bas Wenneker" />
<meta name="copyright" content="Bas Wenneker" />


<title>Solutoire.com &rsaquo; Plotr.Configurator</title>
<link rel="stylesheet" type="text/css" href="assets/styles/plotcfg.css" />
<link rel="icon" href="http://solutoire.com/blog/wp-content/themes/v7/styles/img/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://solutoire.com/blog/wp-content/themes/v7/styles/img/favicon.ico" type="image/x-icon" />

<!--[if IE 7]>
<link type="text/css" rel="stylesheet" href="assets/styles/plotcfg.ie7.css" />
<![endif]-->
<!--[if lt IE 7]>			
<link type="text/css" rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles/ie6.css" />
<![endif]-->

<script src="assets/js/prototype.js" type="text/javascript"></script>
<script src="assets/js/excanvas.js" type="text/javascript"></script>
<script src="assets/js/plotr.js" type="text/javascript"></script>
</head>

<body>
   <div id="wrapper">
         <div id="header"></div>
         <div id="navigation">
         	Navigation: <a href="http://www.solutoire.com/">blog</a> / <a href="http://www.solutoire.com/plotr/">plotr project page</a> / <a href="http://www.solutoire.com/plotr/docs/">documentation</a> / <a href="http://www.solutoire.com/plotr/">download</a>			   
		 </div>
		 		 
		 <div class="ad">
		 	<script type="text/javascript"><!--
				google_ad_client = "pub-5018807259634553";
				google_alternate_color = "9DB98D";
				google_ad_width = 728;
				google_ad_height = 90;
				google_ad_format = "728x90_as";
				google_ad_type = "text";
				//2007-09-20: http://www.solutoire.com
				google_ad_channel = "4051963066";
				google_color_border = "819F70";
				google_color_bg = "9DB98D";
				google_color_link = "FFFFFF";
				google_color_text = "000000";
				google_color_url = "999999";
				//-->
			</script>
			<script type="text/javascript"
			  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
			</script>
		 </div>
		 
		 <div id="help">
		 	<p style="color:#fff; margin: 0 0 10px; width:700px;float:left">This is the Plotr Configurator tool. Here you can configurate a chart by changing the values in the form on the left side of the page. After every change, the code to
			plot the chart is inserted in the dark-grey box at the bottom of the page. You can use the code to plot charts on your own pages (don't forget to include all javascript files).</p>	
         	<p>
				<form id="donate" action="https://www.paypal.com/cgi-bin/webscr" method="post">
					<input type="hidden" name="cmd" value="_s-xclick">
					<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but04.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
					<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
					<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
					">
					Buy me a beer!
				</form> 
			</p>
			<p style="clear:both;"><img src="assets/styles/img/warning.gif" width="16px" height="16px" /> I recommend using Firefox to generate the code. Due to some IE incapabilities the generated options object has redundant key:value pairs.</p>
			
		 </div>
		 
		 <div id="leftcolumn">
		 	<form id="form">
		 	<fieldset><legend><img src="assets/styles/img/wrench.gif" width="16px" height="16px" /> General Options</legend>
				<table>
					<col width="150">
					<col width="200">
					<tbody>
						<tr><!-- Chart Type -->
							<td><label for="charttype">Type of chart:</label></td>
							<td class="inputtd"><span>
								<select name="charttype">
									<option value="BarChart">Bar Chart</option>
									<option value="PieChart">Pie Chart</option>	
									<option value="LineChart">Line Chart</option>																	
								</select>
							</span></td>
						</tr>
						<tr><!-- ColorScheme -->
							<td><label for="colorScheme">Color scheme <a href="http://solutoire.com/plotr/docs/colorscheme/" title="How to use the colorScheme option?">?</a></a>:</label></td>
							<td class="inputtd"><span>
								<select name="colorScheme">																			
									<option value="blue">Blue</option>
									<option value="darkcyan">DarkCyan</option>
									<option value="green">Green</option>
									<option value="red">Red</option>
									<option value="grey">Grey</option>									
									<option value="black">Black</option>									
								</select>
							</span></td>
						</tr>
						<tr><!-- Fill opacity -->
							<td><label for="fillOpacity">Fill opacity:</label></td>
							<td class="inputtd"><span><input type="text" value="1.0" name="fillOpacity" /></span></td>
						</tr>
						<tr class="barOpt hidden"><!-- barOrientation -->
							<td><label for="barOrientation">Orientation:</label></td>
							<td class="inputtd"><span>
								<select name="barOrientation">
									<option value="vertical">Vertical</option>
									<option value="horizontal">Horizontal</option>									
								</select>
							</span></td>							
						</tr>
						<tr class="lineOpt hidden"><!-- Real lines -->
							<td><label for="shouldFill">Real lines:</label></td>
							<td><input type="checkbox" value="false" name="shouldFill" /></td>							
						</tr>
						<tr class="pieOpt hidden"><!-- Pie Radius -->
							<td><label for="pieRadius">Pie radius:</label></td>
							<td class="inputtd"><span><input type="text" value="0.4" name="pieRadius" /></span></td>
						</tr>
					</tbody>
				</table>
			</fieldset>
			
			<fieldset><legend><img src="assets/styles/img/wrench.gif" width="16px" height="16px" /> Axis Options</legend>
				<table>
					<col width="150"></col>
					<col width="200"></col>
					<tbody>
						<tr class="axis1"><!-- Hide x axis -->
							<td><label for="axis-x-hide">Hide x axis:</label></td>
							<td><input type="checkbox" value="true" name="axis-x-hide"/></td>
						</tr>							
						<tr class="axis2"><!-- Hide y axis -->
							<td><label for="axis-y-hide">Hide y axis:</label></td>
							<td><input type="checkbox" value="true" name="axis-y-hide"/></td>
						</tr>
						<tr class="axis3"><!-- X-axis tick count -->
							<td><label for="axis-x-tickCount">X-axis tick count:</label></td>
							<td class="inputtd"><span><input type="text" value="10" name="axis-x-tickCount" /></span></td>
						</tr>
						<tr class="axis4"><!-- Y-axis tick count -->
							<td><label for="axis-y-tickCount">Y-axis tick count:</label></td>
							<td class="inputtd"><span><input type="text" value="10" name="axis-y-tickCount" /></span></td>
						</tr>
						<tr class="axis5"><!-- Axis line width -->
							<td><label for="axis-lineWidth">Axis line width:</label></td>
							<td class="inputtd"><span><input type="text" value="1.0" name="axis-lineWidth" /></span></td>
						</tr>
						<tr class="axis6"><!-- Axis line color -->
							<td><label for="axis-lineColor">Axis line color:</label></td>
							<td class="inputtd"><span><input type="text" value="#000000" name="axis-lineColor" /></span></td>
						</tr>
						<tr class="axis7"><!-- Axis tick size -->
							<td><label for="axis-tickSize">Axis tick size:</label></td>
							<td class="inputtd"><span><input type="text" value="3.0" name="axis-tickSize" /></span></td>
						</tr>
						<tr class="axis8"><!-- Axis label color -->
							<td><label for="axis-labelColor">Axis label color:</label></td>
							<td class="inputtd"><span><input type="text" value="#000000" name="axis-labelColor" /></span></td>
						</tr>
						<tr class="axis9"><!-- Axis label font -->
							<td><label for="axis-labelFont">Axis label font:</label></td>
							<td class="inputtd"><span><input type="text" value="Tahoma" name="axis-labelFont" /></span></td>
						</tr>
						<tr class="axis10"><!-- Axis label fontsize -->
							<td><label for="axis-labelFontSize">Axis label fontsize:</label></td>
							<td class="inputtd"><span><input type="text" value="9" name="axis-labelFontSize" /></span></td>
						</tr>
					</tbody>
				</table>				
			</fieldset>
			
			<fieldset><legend><img src="assets/styles/img/wrench.gif" width="16px" height="16px" /> Background Options</legend>
				<table>
					<col width="150"></col>
					<col width="200"></col>
					<tbody>
						<tr class="bg1"><!-- Hide background -->
							<td><label for="background-hide">Hide background:</label></td>
							<td><input type="checkbox" value="true" name="background-hide"/></td>
						</tr>
						<tr class="bg2"><!-- Background color -->
							<td><label for="background-width">Background color:</label></td>
							<td class="inputtd"><span><input type="text" value="#f5f5f5" name="background-color" /></span></td>
						</tr>
						<tr class="bg3"><!-- Background line color -->
							<td><label for="background-lineColor">Background line color:</label></td>
							<td class="inputtd"><span><input type="text" value="#ffffff" name="background-lineColor" /></span></td>
						</tr>
						<tr class="bg4"><!-- Background line width -->
							<td><label for="background-lineWidth">Background line width:</label></td>
							<td class="inputtd"><span><input type="text" value="1.5" name="background-lineWidth" /></span></td>
						</tr>
					</tbody>
				</table>
			</fieldset>
			
			<fieldset><legend><img src="assets/styles/img/wrench.gif" width="16px" height="16px" /> Legend Options</legend>
				<table>
					<col width="150"></col>
					<col width="200"></col>
					<tbody>
						<tr><!-- Hide legend -->
							<td><label for="legend-hide">Hide legend:</label></td>
							<td><input type="checkbox" value="true" name="legend-hide"/></td>
						</tr>
						<tr><!-- Legend opacity -->
							<td><label for="legend-opacity">Legend opacity:</label></td>
							<td class="inputtd"><span><input type="text" value="0.8" name="legend-opacity" /></span></td>
						</tr>
						<tr><!-- Legend border color -->
							<td><label for="legend-borderColor">Legend border color:</label></td>
							<td class="inputtd"><span><input type="text" value="#000000" name="legend-borderColor" /></span></td>
						</tr>
						<tr><!-- Legend top -->
							<td><label for="legend-opacity">Legend position top:</label></td>
							<td class="inputtd"><span><input type="text" value="20px" name="legend-position-top" /></span></td>
						</tr>
						<tr><!-- Legend left -->
							<td><label for="legend-opacity">Legend position left:</label></td>
							<td class="inputtd"><span><input type="text" value="40px" name="legend-position-left" /></span></td>
						</tr>
					</tbody>
				</table>				
			</fieldset>
			
			<fieldset><legend><img src="assets/styles/img/wrench.gif" width="16px" height="16px" /> Stroke Options</legend>
				<table>
					<col width="150"></col>
					<col width="200"></col>
					<tbody>
						<tr><!-- Hide stroke -->
							<td><label for="stroke-hide">Hide stroke:</label></td>
							<td><input type="checkbox" value="true" name="stroke-hide" /></td>
						</tr>
						<tr><!-- Hide shadow -->
							<td><label for="stroke-shadow">Hide shadow:</label></td>
							<td><input type="checkbox" value="false" name="stroke-shadow" /></td>
						</tr>
						<tr><!-- Stroke width -->
							<td><label for="stroke-width">Stroke width:</label></td>
							<td class="inputtd"><span><input type="text" value="2" name="stroke-width" /></span></td>
						</tr>
						<tr><!-- Stroke color -->
							<td><label for="stroke-width">Stroke color:</label></td>
							<td class="inputtd"><span><input type="text" value="#ffffff" name="stroke-color" /></span></td>
						</tr>
					</tbody>
				</table>
			</fieldset>			
			</form>
			<div id="control">
				<a href="javascript:void(0);" id="resetBtn" class="btn">
					<img src="assets/styles/img/reset.gif" alt="reset" /> 
					Reset form
				</a>
			</div>
		 </div>
		 
		 <!-- Begin Right Column -->
		 <div id="rightcolumn">
		 	 <div id="canvas">
	     		<div><canvas id="plotr" height="300" width="500"></canvas></div>			
			</div>
		 	<div style="clear:both"></div>	 
		 </div>
		 <!-- End Right Column -->
			
		 <div class="ad">
		 	<script type="text/javascript"><!--
				google_ad_client = "pub-5018807259634553";
				google_alternate_color = "9DB98D";
				google_ad_width = 728;
				google_ad_height = 90;
				google_ad_format = "728x90_as";
				google_ad_type = "text";
				//2007-09-20: http://www.solutoire.com
				google_ad_channel = "4051963066";
				google_color_border = "819F70";
				google_color_bg = "9DB98D";
				google_color_link = "FFFFFF";
				google_color_text = "000000";
				google_color_url = "999999";
				//-->
			</script>
			<script type="text/javascript"
			  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
			</script>
		 </div>
			
		 <div id="codeWrapper">		       
			  <pre><code id="code"></code></pre>			    
	     </div> 
		 
		 <div class="ad">
		 	<script type="text/javascript"><!--
				google_ad_client = "pub-5018807259634553";
				google_alternate_color = "9DB98D";
				google_ad_width = 728;
				google_ad_height = 90;
				google_ad_format = "728x90_as";
				google_ad_type = "text";
				//2007-09-20: http://www.solutoire.com
				google_ad_channel = "4051963066";
				google_color_border = "819F70";
				google_color_bg = "9DB98D";
				google_color_link = "FFFFFF";
				google_color_text = "000000";
				google_color_url = "999999";
				//-->
			</script>
			<script type="text/javascript"
			  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
			</script>
		 </div>
		 
		 <div id="footer">
		       &copy; 2007 Bas Wenneker / <a href="http://www.solutoire.com" title="Solutoire.com">solutoire.com</a> / <a href="http://www.solutoire.com/plotr/" title="Plotr Project Page">Plotr</a> is BSD licensed /		    
	     </div>		 
   </div>
	<script src="assets/js/plotcfg.js" type="text/javascript"></script>
	<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
	</script>
	<script type="text/javascript">
	_uacct = "UA-658367-1";
	urchinTracker();
	</script>
</body>
</html>
